<template>
  <div>
    <a-card class="mb-12 ax__dynamic__form" title="批量新增">
      <div class="flex gap-4">
        <template v-for="(item, key) in data" :key="key">
          <div
            class="ax_form_item_creation flex flex-s"
            @click="selectTestForm(item)"
            :class="[{ 'form-item-active': item.id === active }]"
          >
            <div class="item-index">
              <a-badge
                :color="item.id === active ? 'var(--primary)' : '#cccccccf'"
                :count="key + 1"
              ></a-badge>
            </div>
            <div @click.stop="delTestForm(item.id, key)" class="item-close text-[12px]">
              <CloseOutlined class="text-[10px]" />
            </div>
          </div>
        </template>

        <div
          class="create ax_form_item_creation"
          @click.stop="addTestForm"
          v-if="data.length < maxCount"
        >
          <div class="item-index">
            <PlusOutlined class="text-[20px]" />
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
/**
 * @description:
 * 全局批量新增组件
 * 谨慎修改
 */
const maxCount = 5;
type PropItem = {
  id: string;
  data: any[];
};

const props = defineProps<{
  /* 动态创建的每一项 */
  data: any[];
  /* 当前激活的字段 */
  active: string;
  /* 表单 formRef 用于校验 */
  form: any;
}>();

const emit = defineEmits(['select', 'del', 'add']);

const selectTestForm = (item: PropItem) => {
  emit('select', item);
};

const delTestForm = (item: PropItem, i: number) => {
  emit('del', item, i);
};

/* 创建的时候需要校验 */
const addTestForm = () => {
  if (props.data.length >= maxCount) return;
  nextTick(async () => {
    const validate = await props.form.validate();
    if (validate) {
      emit('add');
    }
  });
};
</script>

<style lang="scss" scoped></style>
